<!-- 订单管理 -->
<template>
  <div class="gl_contentBox gl_heightFull" style="overflow: auto">
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>订单状态</p>
          <el-select v-model="Api_GET_TradeBusinessOrderListQO.OrderStatusCode" size="mini" placeholder="请选择订单状态" clearable filterable @change="getOrder()">
            <el-option label="全部" value="" />
            <el-option v-for="item in orderStatus" :key="item.code" :label="item.value" :value="item.code" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>按订单类型</p>
          <el-select v-model="Api_GET_TradeBusinessOrderListQO.OrderTypeCode" size="mini" placeholder="请选择订单类型" clearable filterable @change="getOrder()">
            <el-option label="全部" value="" />
            <el-option v-for="item in orderTypeList" :key="item.code" :label="item.value" :value="item.code" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>按支付方式选择</p>
          <el-select v-model="Api_GET_TradeBusinessOrderListQO.ChannelTypeCode" size="mini" placeholder="请选择支付方式" clearable filterable @change="getOrder()">
            <el-option label="全部" value="" />
            <el-option v-for="item in dict.channelType" :key="item.code" :label="item.value" :value="item.code" />
          </el-select>
        </el-col>
        <el-col :md="8" :lg="6">
          <p>付款时间</p>
          <el-date-picker
            v-model="paymentTime"
            type="daterange"
            range-separator="至"
            start-placeholder="请选择日期"
            end-placeholder="请选择日期"
            size="mini"
            value-format="yyyy-MM-dd"
            style="width:100%"
            @change="timeChange"
          />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>订单号</p>
          <el-input v-model="Api_GET_TradeBusinessOrderListQO.OrderNo" placeholder="请输入订单号" size="mini" clearable @change="getOrder()" />
        </el-col>
      </el-row>
      <el-row class="gl_mt_15" :gutter="20">
        <el-col :md="6" :lg="4">
          <p>商品名称</p>
          <el-input v-model="Api_GET_TradeBusinessOrderListQO.OrderName" placeholder="请输入商品名称" size="mini" clearable @change="getOrder()" />
        </el-col>
        <el-col :md="8" :lg="6">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="getOrder()">筛选</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="reset()">重置</el-button>
        </el-col>
        <el-col :md="8" :lg="14" align="right">
          <el-button type="warning" style="margin-top:27px" size="mini" :loading="btnUpLoading" @click="exportstudent()">订单导出</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-loading="loading" class="order">
      <el-button v-if="Api_GET_TradeBusinessOrderListQO.OrderTypeCode == 'CompetitionOrder'" type="primary" size="mini" @click="exportExcel">赛事订单导出</el-button>
      <p class="num">共计 {{ totalPage }} 条数据</p>
      <ul v-if="orderList.length > 0">
        <template v-for="item in orderList">
          <li v-if="item.orderTypeCode == 'LogisticsOrder' || item.orderTypeCode == 'CompetitionOrder' || item.orderTypeCode == 'TrainingOrder'" :key="item.id">
            <el-row class="gl_mb_10 gl_ml_20" style="color:#666666">
              <span>订单号：<span>{{ item.orderNo }}</span></span>
              <div class="order_right order_span">
                <span v-if="item.orderStatusCode" class="content">
                  <template v-for="ktem in dict.orderStatus">
                    {{ ktem.code === item.orderStatusCode ? ktem.value: '' }}
                  </template>
                </span>
              </div>
            </el-row>
            <div class="order_title order_box">
              <div class="order_img gl_fl">
                <img v-if="item.pathImages" :src="getStaticFileUrl(item.pathImages)" alt="" style="width:100%;height:100%">
              </div>
              <div class="order_text gl_fl">
                <p>
                  <span class="order_bold gl_order_name">{{ item.name }}</span>
                  <span v-if="item.orderTypeCode" class="content">
                    <el-tag size="mini">
                      <template v-for="ktem in dict.orderType">
                        {{ ktem.code === item.orderTypeCode ? ktem.value : '' }}
                      </template>
                    </el-tag>
                  </span>
                  <el-tag v-if="item.isOnlinePayment" size="mini">线上支付</el-tag>
                  <el-tag v-else size="mini">线下支付</el-tag>
                </p>
                <p><span class="gl_mr_5">备注：{{ item.businessRemark }}</span><i class="el-icon-edit-outline" @click="open(item.orderNo)" /></p>
                <p>
                  <span class="gl_mr_15">
                    付款时间：
                    <span v-if="item.payDateTime == '0001-01-01T00:00:00'">- -</span>
                    <span v-else>{{ item.payDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
                  </span>
                  <span class="gl_ml_15">
                    下单时间：
                    <span v-if="item.orderDateTime == '0001-01-01T00:00:00'">- -</span>
                    <span v-else>{{ item.orderDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
                  </span>
                </p>
                <div>
                  <p style="display: inline-block;" class="gl_pr_15">
                    <span class="text_color">下单账号：</span>
                    <span>{{ item.orderAccount || (item.creatorMobile ? item.creatorMobile : '- -') }}</span>
                  </p>
                  <p style="display: inline-block;" class="gl_px_15">
                    <span class="text_color">付款人：</span>
                    <span>{{ item.creatorName ? item.creatorName : '- -' }}</span>
                  </p>
                  <p style="display: inline-block;" class="gl_pl_15">
                    <span class="text_color">付款机构：</span>
                    <span>{{ item.delegationName ? item.delegationName : '- -' }}</span>
                  </p>
                </div>
              </div>
              <div class="order_right gl_mt_30 order_span">
                <p style="text-align:right">共计{{ (item.totalPrice / 100).toFixed(2) }}元</p>
                <p class="gl_pl_20 gl_ml_25" style="line-height: 34px;">
                  <span v-if="item.channelTypeCode">
                    <template v-for="ktem in dict.channelType">
                      {{ ktem.code === item.channelTypeCode ? ktem.value : '' }}
                    </template>
                  </span>
                  <span class="gl_ml_20">实付：<span class="order_bold">￥{{ (item.payPrice / 100).toFixed(2) }}</span></span>
                </p>
              </div>
            </div>
            <div class="order_bu">
              <div class="order_right">
                <el-button v-if="item.orderStatusCode == 'WAIT_BUYER_PAY'" type="warning" size="mini" @click="cancelOrder(item.orderNo)">取消订单</el-button>
                <el-button v-if="item.orderStatusCode == 'WAIT_BUYER_PAY' && item.isOnlinePayment" type="success" size="mini" @click="payment(item.orderNo, item.orderTypeCode)">去支付</el-button>
                <!-- <el-button v-if="item.orderStatusCode == 'WAIT_BUYER_PAY' && item.isOnlinePayment == false" type="success" size="mini" @click="collection(item.orderNo)">确认收款</el-button> -->
                <el-button type="primary" size="mini" @click="showDetail(item.orderNo)">订单详情</el-button>
              </div>
            </div>
          </li>
          <li v-else :key="item.id">
            <el-row class="gl_mb_10 gl_ml_20" style="color:#666666">
              <span>订单号：<span>{{ item.orderNo }}</span></span>
              <div class="order_right order_span">
                <span v-if="item.orderStatusCode" class="content">
                  <template v-for="ktem in dict.orderStatus">
                    {{ ktem.code === item.orderStatusCode ? ktem.value: '' }}
                  </template>
                </span>
              </div>
            </el-row>
            <div class="order_title order_box" style="height: 130px; padding: 0px 15px 0px 5px">
              <!-- <div class="order_title order_box" style="height: 100px; padding: 0px 15px 0px 5px"> -->
              <!-- <div class="order_text gl_fl" style="line-height: 24px"> -->
              <div class="order_text gl_fl" style="line-height: 28px">
                <p v-if="item.orderTypeCode == 'ClubStudentMembershipCardOrder' || item.orderTypeCode == 'SystemOrder' || item.orderTypeCode == 'MemberRenewalOrder' || item.orderTypeCode == 'DuanExamOrder' || item.orderTypeCode == 'InsuranceOrder'"><span class="order_bold gl_order_name">{{ item.name }}</span></p>
                <p>
                  <span class="gl_mr_5">备注：{{ item.businessRemark }}</span><i class="el-icon-edit-outline" @click="open(item.orderNo)" />
                  <span v-if="item.orderTypeCode" class="content">
                    <el-tag size="mini">
                      <template v-for="ktem in dict.orderType">
                        {{ ktem.code === item.orderTypeCode ? ktem.value : '' }}
                      </template>
                    </el-tag>
                  </span>
                  <el-tag v-if="item.isOnlinePayment" size="mini">线上支付</el-tag>
                  <el-tag v-else size="mini">线下支付</el-tag>
                </p>
                <p>
                  <span class="gl_mr_15">
                    付款时间：
                    <span v-if="item.payDateTime == '0001-01-01T00:00:00'">- -</span>
                    <span v-else>{{ item.payDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
                  </span>
                  <span class="gl_ml_15">
                    下单时间：
                    <span v-if="item.orderDateTime == '0001-01-01T00:00:00'">- -</span>
                    <span v-else>{{ item.orderDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
                  </span>
                </p>
                <div>
                  <p style="display: inline-block;" class="gl_pr_15">
                    <span class="text_color">下单账号：</span>
                    <span>{{ item.orderAccount || (item.creatorMobile ? item.creatorMobile : '- -') }}</span>
                  </p>
                  <p style="display: inline-block;" class="gl_px_15">
                    <span class="text_color">付款人：</span>
                    <span>{{ item.creatorName ? item.creatorName : '- -' }}</span>
                  </p>
                  <p v-if="item.expressInfo || item.expressName">
                    <span class="text_color">物流信息：</span>
                    <span class="gl_pr_10">{{ item.expressName ? item.expressName : '无' }}</span>
                    <span>{{ item.expressInfo ? item.expressInfo : '' }}</span>
                  </p>
                </div>
              </div>
              <div class="order_right gl_mt_30 order_span">
                <p style="text-align:right">共计{{ (item.totalPrice / 100).toFixed(2) }}元</p>
                <p class="gl_pl_20 gl_ml_25" style="line-height: 34px;">
                  <span v-if="item.channelTypeCode">
                    <template v-for="ktem in dict.channelType">
                      {{ ktem.code === item.channelTypeCode ? ktem.value : '' }}
                    </template>
                  </span>
                  <span class="gl_ml_20">实付：<span class="order_bold">￥{{ (item.payPrice / 100).toFixed(2) }}</span></span>
                </p>
              </div>
            </div>
            <div class="order_bu">
              <div class="order_right">
                <el-button v-if="item.orderStatusCode == 'WAIT_BUYER_PAY'" type="warning" size="mini" @click="cancelOrder(item.orderNo)">取消订单</el-button>
                <el-button v-if="item.orderStatusCode == 'WAIT_BUYER_PAY' && item.isOnlinePayment" type="success" size="mini" @click="payment(item.orderNo, item.orderTypeCode)">去支付</el-button>
                <!-- <el-button v-if="item.orderStatusCode == 'WAIT_BUYER_PAY' && item.isOnlinePayment == false" type="success" size="mini" @click="collection(item.orderNo)">确认收款</el-button> -->
                <template v-if="item.orderTypeCode == 'MallOrder' && (item.orderStatusCode == 'TRADE_FINISHED' || item.orderStatusCode == 'TRADE_SUCCESS')">
                  <el-button v-if="item.expressInfo || item.expressName" type="warning" size="mini" @click="deliver(item)">修改发货信息</el-button>
                  <el-button v-else type="success" size="mini" @click="deliver(item)">订单发货</el-button>
                </template>
                <el-button type="primary" size="mini" @click="showDetail(item.orderNo)">订单详情</el-button>
              </div>
            </div>
            <div v-if="false && item.orderMall.length > 0" class="mall gl_mt_5 gl_mx_15">
              <div v-for="(goods, gIndex) in item.orderMall" :key="gIndex" class="gl_mb_5" style="height: 60px">
                <div class="mall_img gl_dis_ib gl_middle">
                  <img v-if="goods.productImageUrl" :src="getStaticFileUrl(goods.productImageUrl)" alt="" style="width:100%; height:100%">
                </div>
                <div class="order_text gl_dis_ib gl_middle" style="width: calc(100% - 140px); height:60px; line-height:60px">
                  <el-row>
                    <el-col :span="16" class="gl_fs_16 gl_ft_weight">
                      {{ goods.productName }}
                    </el-col>
                    <el-col :span="8" align="right">
                      X{{ goods.productNum }}
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </li>
        </template>
      </ul>
      <div v-else>
        <el-table :data="orderList" size="mini" />
      </div>
    </div>
    <el-row class="gl_pt_15" style="text-align: center;">
      <el-pagination
        :current-page="Api_GET_TradeBusinessOrderListQO.Page"
        :page-size="Api_GET_TradeBusinessOrderListQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <form id="form" ref="form" action="https://unipay.ydfuture.com/api/v1/trade/cashDesk" method="post" style="display:none">
      <input ref="pay_params" type="text" name="pay_params" value="">
      <button type="submit">提交</button>
    </form>
    <BatchExport ref="batchExport" :form="Api_GET_TradeBusinessOrderListQO" />
    <DeliverGoods ref="deliverGoods" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import DeliverGoods from './deliverGoods';
import BatchExport from './batchExport';
import { errorText } from '@/lib';
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import {
  api_GET_TradeBusinessOrderList,
  api_PUT_TradeBusinessOrderConfirmTheProceeds,
  api_PUT_TradeCancellationOfOrder,
  api_PUT_TradeBusinessOrderRemark,
  api_GET_TradePayOrderParameter
} from '@/extend/api/swaggerApi/app.js';
import {
  Api_GET_TradeBusinessOrderListQO,
  Api_GET_TradePayOrderParameterQO
} from '@/lib/form/swaggerForm';
export default {
  name: 'Order',
  components: {
    BatchExport,
    DeliverGoods
  },
  data() {
    return {
      loading: false,
      Api_GET_TradeBusinessOrderListQO: new Api_GET_TradeBusinessOrderListQO(),
      Api_GET_TradePayOrderParameterQO: new Api_GET_TradePayOrderParameterQO(),
      paymentTime: [], // 付款时间
      currentPage: 1, // 当前页
      totalPage: 0, // 总条目数
      isShowDetail: false,
      btnUpLoading: false,
      Getinput: {},
      amountDetails: [], // 费用详情
      orderList: [], // 订单列表
      orderStatus: [],
      orderTypeList: [] // 订单类型下拉列表
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      DelegationId: state => state.user.rootDelegationId
    })
  },
  created() {
    this.getDict().then(res => {
      this.orderStatus = res.orderStatus.filter((item) => {
        return item.code !== 'TRADE_SUCCESS';
      });
      this.orderTypeList = res.orderType.filter((item) => {
        return item.code !== 'VoteOrder';
      });
    });
    this.getOrder();
    if (this.$route.query.error_msg) {
      this.$message({
        type: 'error',
        message: this.$route.query.error_msg
      });
    }
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取订单数据
    getOrder(page) {
      var that = this;
      that.loading = true;
      that.Api_GET_TradeBusinessOrderListQO.Page = page || 1;
      that.Api_GET_TradeBusinessOrderListQO.SkipCount = (that.Api_GET_TradeBusinessOrderListQO.Page - 1) * that.Api_GET_TradeBusinessOrderListQO.MaxResultCount;
      that.Api_GET_TradeBusinessOrderListQO.BusinessesId = this.DelegationId;
      that.Api_GET_TradeBusinessOrderListQO.IsExpend = true;
      api_GET_TradeBusinessOrderList(that.Api_GET_TradeBusinessOrderListQO).then(res => {
        that.orderList = res.items;
        that.totalPage = res.totalCount;
        that.loading = false;
      }).catch(error => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error.message });
      });
    },
    // 付款日期选择器
    timeChange(val) {
      if (val instanceof Array) {
        this.Api_GET_TradeBusinessOrderListQO.PaymentStartDate = this.paymentTime[0];
        this.Api_GET_TradeBusinessOrderListQO.PaymentEndDate = this.paymentTime[1];
      } else {
        this.Api_GET_TradeBusinessOrderListQO.PaymentStartDate = '';
        this.Api_GET_TradeBusinessOrderListQO.PaymentEndDate = '';
      }
      this.getOrder(this.Api_GET_TradeBusinessOrderListQO.Page);
    },
    // 图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 重置搜索表单
    reset() {
      this.Api_GET_TradeBusinessOrderListQO = new Api_GET_TradeBusinessOrderListQO();
      this.getOrder();
    },
    // 查看详情
    showDetail(orderNo) {
      this.$router.push({
        name: 'ExpenditureOrderDetail',
        query: { orderNo: orderNo, type: 'expenditure' }
      });
    },
    // 确认收款
    collection(id) {
      var that = this;
      this.$confirm('您确定已经线下支付赛事的费用吗?', '确认收款', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.loading = true;
        const data = { orderNo: id };
        api_PUT_TradeBusinessOrderConfirmTheProceeds(data).then(res => {
          that.$message({
            type: 'success',
            message: '收款成功!'
          });
          that.loading = false;
          that.getOrder(that.Api_GET_TradeBusinessOrderListQO.Page);
        }).catch((error) => {
          that.loading = false;
          that.$message({ type: 'error', message: error.error.message || '操作失败' });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    // 取消订单
    cancelOrder(id) {
      var that = this;
      this.$confirm('您确定要取消订单吗?', '取消订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.loading = true;
        const data = { orderNo: id };
        api_PUT_TradeCancellationOfOrder(data).then(res => {
          that.$message({
            type: 'success',
            message: '取消成功!'
          });
          that.loading = false;
          that.getOrder(that.Api_GET_TradeBusinessOrderListQO.Page);
        }).catch((error) => {
          that.loading = false;
          that.$message({ type: 'error', message: error.error.message || '操作失败' });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '放弃取消'
        });
      });
    },
    // 去支付
    payment(id, type) {
      var that = this;
      if (id) {
        const _origin = window.location.origin;
        let _pathname = '/';
        let _orderUrl = '';
        // if (type === 'SystemOrder') {
        //   _orderUrl = '#/' + this.$route.params.tenantId + '/order/orderSearch';
        // } else {
        //   _pathname = '/hall.html';
        //   _orderUrl = '#/' + this.$route.params.tenantId + '/order/expenditure/';
        // }
        if(window.location.pathname === '/hall.html') {
          _pathname = '/hall.html';
          _orderUrl = '#/' + this.$route.params.tenantId + '/order/expenditure/';
        } else {
          if(type === 'SystemOrder' || type === 'CompetitionPubbLishOrder') {
            _orderUrl = '#/' + this.$route.params.tenantId + '/order/orderSearch';
          } else {
            _pathname = '/hall.html';
          _orderUrl = '#/' + this.$route.params.tenantId + '/order/expenditure/';
          }
        }
        const url = _origin + _pathname + _orderUrl;
        that.Api_GET_TradePayOrderParameterQO.OrderNo = id;
        that.Api_GET_TradePayOrderParameterQO.ReturnUrl = url; // 支付成功后跳转的地址
        api_GET_TradePayOrderParameter(that.Api_GET_TradePayOrderParameterQO).then(res => {
          this.$refs.pay_params.value = res.parameter.replace(/\s*/g, '');
          this.$refs.form.submit();
        }).catch(error => {
          this.$message({
            type: 'error',
            message: error.error.message
          });
        });
      }
    },
    // 订单发货
    deliver(item) {
      const express = {
        id: item.expressId,
        name: item.expressName
      };
      const data = item.details ? JSON.parse(item.details) : {};
      this.$refs.deliverGoods.open(item.orderNo, data.ConsigneeName, data.PhoneNumber, data.Address, express, item.expressInfo);
    },
    exportstudent() {
      var that = this;
      that.Getinput.OrderStatusCode = this.Api_GET_TradeBusinessOrderListQO.OrderStatusCode;
      that.Getinput.OrderTypeCode = this.Api_GET_TradeBusinessOrderListQO.OrderTypeCode;
      that.Getinput.ChannelTypeCode = this.Api_GET_TradeBusinessOrderListQO.ChannelTypeCode;
      that.Getinput.PaymentStartDate = this.Api_GET_TradeBusinessOrderListQO.PaymentStartDate;
      that.Getinput.PaymentEndDate = this.Api_GET_TradeBusinessOrderListQO.PaymentEndDate;
      that.Getinput.OrderName = this.Api_GET_TradeBusinessOrderListQO.OrderName;
      that.Getinput.BusinessesId = this.Api_GET_TradeBusinessOrderListQO.BusinessesId;
      that.Getinput.IsExpend = this.Api_GET_TradeBusinessOrderListQO.IsExpend;
      that.Getinput.SkipCount = (this.Api_GET_TradeBusinessOrderListQO.Page - 1) * this.Api_GET_TradeBusinessOrderListQO.MaxResultCount;
      that.Getinput.Page = this.Api_GET_TradeBusinessOrderListQO.Page;
      that.Getinput = JSON.stringify(this.Getinput);
      that.btnUpLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = '订单' + '.xlsx';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { reportName: 'ExportAllOrdersExcel', searchBusinessOrder: that.Getinput }).then(res => {
        that.btnUpLoading = false;
        that.Getinput = {};
      }).catch(error => {
        that.btnUpLoading = false;
        that.Getinput = {};
        errorText(error).then(function(text) {
          that.Getinput = {};
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 进行订单备注
    open(id) {
      var that = this;
      this.$prompt('', '备注信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea'
      }).then(({ value }) => {
        const data = [{
          orderNo: id,
          businessRemark: value
        }];
        api_PUT_TradeBusinessOrderRemark(data).then(res => {
          that.$message({
            type: 'success',
            message: '备注成功'
          });
          that.getOrder(that.Api_GET_TradeBusinessOrderListQO.Page);
        }).catch(() => {});
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消备注'
        });
      });
    },
    // 打开批量导出弹窗
    exportExcel() {
      this.$refs.batchExport.open();
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.Api_GET_TradeBusinessOrderListQO.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.getOrder();
    },
    pageIndexChange(currentPage) {
      this.getOrder(currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>
.order {
  min-height: 300px;
  min-width: 900px;
}
.order ul li {
  border-radius: 4px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
  padding: 15px;
  margin-bottom: 15px;
}
.order_box {
  border-radius: 4px;
  padding: 10px 15px 0px;
}
.order_title {
  height: 130px;
}
.order_img {
  width: 100px;
  height: 100px;
  border: 1px solid #DCDFE6;
  margin-right: 15px;
  border-radius: 50px;
  overflow: hidden;
}
.mall_img {
  width: 60px;
  height: 60px;
  border: 1px solid #DCDFE6;
  margin-right: 15px;
  border-radius: 30px;
  overflow: hidden;
}
.order_text {
  line-height: 28px;
  height: 100px;
  padding: 0px 15px;
  font-size: 14px;
}
.creator {
  border-top:1px solid #bfbfbf;
  color:#666666;
  font-size: 14px;
}
.el-tag {
  margin-left: 15px;
}
.order_bu {
  height: 30px;
}
.order_right {
  float: right;
}
.order_bold {
  font-size: 18px;
  font-weight: 600;
  color: #000;
}
.order_span {
  font-weight: 400;
  color: #9D9D9D;
  font-size: 14px;
}
.num {
  text-align: right;
  padding-right: 5px;
  font-size: 14px;
  color: #9D9D9D;
}
.mall {
  border-top: 1px solid #DCDFE6;
  font-size: 14px;
  padding: 10px 0px 0px;
}
</style>
